<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <!-- <div slot="common-search">
            <div class="common-btn">
                <el-button type="primary" size="mini">导出本日权利金</el-button>
                <el-button type="success" size="mini">收款账户</el-button>
            </div>
        </div> -->
        <template slot="common-body">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form ref="form" :model="priceForm" label-width="100px" size="small">
                        <h2 class="tc">询价</h2>
                        <el-row class="bg-grey mt20">
                            <el-form-item label="标的股票：">
                                <el-input v-model="priceForm.code_name" placeholder="输入编号、名称、首字母查询" @keyup.native="getFilterText"></el-input>
                                <div class="search-list" v-show="bool">
                                    <ul>
                                        <li>
                                            <span>编号</span>
                                            <span>名称</span>
                                        </li>
                                        <li v-for="(item,index) of codeList" :key="index" @click="clickChooseTikit(item)">
                                            <span>{{item.key}}</span>
                                            <span>{{item.name}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-form-item>

                        </el-row>

                        <el-row class="bg-grey mt20">
                            <el-form-item label="名义本金：">
                                <el-input placeholder="20万起，以万为单位递增" v-model="priceForm.money_name">
                                    <template slot="append">万元</template>
                                </el-input>
                                <template v-for="(item,index) of moneyList">
                                    <el-tag size="small" :type="item.isActive?'danger':'success'" @click.native="clickMoneyList(item,1)" class="mr10 mt5 pointer" :key="index">{{item.times}}</el-tag>
                                </template>
                            </el-form-item>

                        </el-row>
                        <el-row class="bg-grey mt20">
                            <el-form-item label="行权周期：">
                                <template v-for="(item,index) of weekList">
                                    <el-tag class="mr10 mt5 pointer" @click.native="clickMoneyList(item,2)" :type="item.isActive?'danger':'success'" :key="index" size="small">{{item.times}}</el-tag>
                                </template>
                            </el-form-item>

                        </el-row>
                        <el-row class="mt20">
                            <el-button type="primary" @click="searchFromChild" style="width:100%">查询</el-button>
                        </el-row>
                        <el-row class="bg-grey mt20">
                            <el-form-item label="权利金比例：">
                                <i class="red">{{moneyBILI}}%</i>
                            </el-form-item>
                            <el-form-item label="权利金：">
                                <i class="red">{{JSMoney}}</i>
                            </el-form-item>
                        </el-row>
                    </el-form>

                </el-col>
                <el-col :span="18">
 <input type="file" name="file" class="el-upload__input" @change="changeFileUpload">
                    <div>
                        <el-table :data="tableData" border style="width: 100%" size="mini" class="mt10">
                            <el-table-column prop="shares_name" label="股票名称">
                            </el-table-column>
                            <el-table-column prop="shares_code" label="股票代码">
                            </el-table-column>
                            <el-table-column prop="principal" label="名义本金">
                            </el-table-column>
                            <el-table-column prop="trans_date" label="交易日">
                            </el-table-column>
                            <el-table-column prop="cycle" label="合约期限">
                            </el-table-column>

                            <el-table-column prop="pay_ratio" label="权利金比例">
                            </el-table-column>
                            <el-table-column prop="shares_price" label="期望价格">
                            </el-table-column>
                            <el-table-column prop="pay_money" label="应付权利金">
                            </el-table-column>
                        </el-table>

                        <div class="flex flex-center-between p10">
                            <span>共有
                                <i class="red">{{tableData.length}}</i> 条记录</span>
                            <span>订单合计：
                                <i class="red">{{totalMoney}}</i>
                            </span>
                        </div>
                        <div class="tr mt15">
                            <el-button type="primary" size="mini" @click="importExcelReset">{{tableData.length==0?'上传订单':'重新上传'}}</el-button>
                            <el-button type="success" size="mini" @click="createOrder" v-if="tableData.length!=0">创建订单</el-button>
                        </div>
                    </div>
                </el-col>
             
            </el-row>

        </template>

    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
           centerDialogVisible:false,
            loading: false,
            disabled: true,
            moneyBILI: 0,
            JSMoney: '',
            totalMoney: 0,
            priceForm: {
                code_name: '',
                shares_code: '',
                c_money: 0,
                money_name: '',
                cycle: '',
            },
            codeList: [],
            code: code,
            timeStamp: 0,
            bool: false,
            tableData: [],
            weekList: [{
                times: '1周',
                cycle: '1w',
                isActive: false
            }, {
                times: '2周',
                cycle: '2w',
                isActive: false

            }, {
                times: '1月',
                cycle: '1m',
                isActive: false

            }, {
                times: '2月',
                cycle: '2m',
                isActive: false

            }, {
                times: '3月',
                cycle: '3m',
                isActive: false

            }],
            moneyList: [{
                times: '20万',
                money: 20,
                isActive: false

            }, {
                times: '30万',
                money: 30,
                isActive: false

            }, {
                times: '40万',
                money: 40,
                isActive: false

            }, {
                times: '50万',
                money: 50,
                isActive: false

            }, {
                times: '100万',
                money: 100,
                isActive: false

            }, {
                times: '200万',
                money: 200,
                isActive: false

            }],

        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
    },
    methods: {
        //
        clickMoneyList(item, type) {
            console.log(item)
            if (type == 1) {
                for (let it of this.moneyList) {
                    it.isActive = false;
                }
                item.isActive = true;
                this.priceForm.money_name = item.times
                this.priceForm.c_money = item.money;
            } else {
                for (let it of this.weekList) {
                    it.isActive = false;
                }
                item.isActive = true;
                this.priceForm.cycle = item.cycle;
            }

        },

        //编辑
        getFilterText(e) {

            this.timeStamp = e.timeStamp;
            setTimeout(() => {
                if (this.timeStamp == e.timeStamp) {
                    this.filterNodeList(this.priceForm.code_name.toLowerCase())
                }
            }, 350)
        },
        filterNodeList(value) {
            if (value) {
                this.codeList = this.code.filter(function (item) {
                    item.pinyin = (pinyinUtil.getFirstLetter(item.name)).toLowerCase();
                    return item.key.indexOf(value) !== -1 || item.pinyin.indexOf(value) !== -1 || item.name.indexOf(value) !== -1;
                })
                this.bool = true;
            } else {
                this.codeList = [];
                this.bool = false;

            }
        },
        async  searchFromChild() {
            let params = Object.assign({}, this.priceForm)
            let res = await service.haiheiQuerRoyaltyValueServer({
                shares_code: this.priceForm.shares_code,
                cycle: this.priceForm.cycle
            });
            if (res.success) {
                let result = res.result
                this.moneyBILI = result
                this.JSMoney = ((this.priceForm.c_money * 10000) * result).toFixed(2);

            } else {
                this.$message({
                    type: "error",
                    message: res.error
                });
            }
        },
        //选择
        clickChooseTikit(item) {
            this.priceForm.code_name = item.name + '  ' + item.key;
            this.bool = false;
            this.priceForm.shares_code = item.key;
        },
        //导入
        importExcelChild() {
            document.querySelector('.el-upload__input').click()
        },
        importExcelReset() {
            document.querySelector('.el-upload__input').click()
        },
        //上传
        changeFileUpload(e) {
            this.loading = true;
            let files = e.target.files;
            let formData = new FormData();
            formData.append('file', files[0]);
            service.haibeiServerUploadFile(formData, 'uploadOrderInfo').then(res => {
                if (res.success) {
                    this.loading = false;
                    e.target.value = ""
                    this.tableData = res.result
                    this.totalMoney = res.msg
                    //this.queryTableList();
                } else {
                    this.loading = false;
                }
            })
        },
        //创建订单
        createOrder() {
            this.$prompt('注意！请确认您已完成订单的转账操作！并输入转账流水号', '订单确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                 inputPattern: /^[a-zA-z0-9]/,
                inputErrorMessage: '转账流水号不正确'
            }).then(async ({ value }) => {
                let res = await service.haiheiAddOrderInfoServer({
                    bank_seq: value
                })
                if (res.success) {
                    this.$message({
                        type: 'success',
                        message: '创建成功'
                    });
                } else {
                    return
                }

            }).catch(() => {
               
            });
        }
    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
.spread_manage-table {
  width: 50%;
  margin-top: 20px;
}
.spread_manage-table td {
  padding: 10px;
  border: 1px solid #f3f3f3;
}
.bg-grey {
  background: #f3f3f3;
  padding: 10px;
}

.search-list {
  height: 300px;
  border: 1px solid #ccc;
  background: #fff;
  overflow: auto;
  position: absolute;
  width: 100%;
  margin-top: 1px;
  z-index: 9999;
}

.search-list li {
  list-style: none;
  border-bottom: 1px solid #f2f2f2;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
}

.search-list li span {
  flex: 1;
  text-align: left;
}
</style>